<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header>
    <h1>第4章 视觉效果</h1>
</header>
<main>
    <section>
        <h2>15 单侧投影</h2>
        <section>
            <h3>单侧投影</h3>
            <div class="shadow-one-side"></div>
        </section>
        <section>
            <h3>邻边投影</h3>
            <div class="shadow-two-sides"></div>
        </section>
        <section>
            <h3>双侧投影</h3>
            <div class="shadow-opposite-sides"></div>
        </section>
    </section>
    <section>
        <h2>16 不规则投影</h2>
        <div class="drop-shadow"></div>
    </section>
    <section>
        <h2>17 染色效果</h2>
        <section>
            <h3>基于滤镜的方案</h3>
            <img class="color-tint-filter" src="./cats.jpg" alt="">
        </section>
        <section>
            <h3>基于混合模式的方案</h3>
            <div class="color-tint-a">
                <img src="./cats.jpg" alt="">
            </div>
            <div class="color-tint-background"></div>
        </section>
    </section>
    <section>
        <h2>18 毛玻璃效果</h2>
        <div class="frosted-glass">
            <div class="frosted-glass-content">
                这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,这是一段文本,
            </div>
        </div>
    </section>
    <section>
        <h2>19 折角效果</h2>
        <section>
            <h3>切角方案</h3>
            <div class="folded-corner"></div>
            <div class="folded-corner-realistic"></div>
        </section>
    </section>
</main>
</body>
</html>
